<template>
    <view class="vrPages bg-fff">
		<view class="searchInputWrap bg-fff">
			<up-search v-model="keyword" placeholder="输入您想查看的楼盘名称" height="40" shape="round" borderColor="#E5E5E5" :showAction="false" bgColor="#FFFFFF" @change="clickSearch" @search="clickSearch"></up-search>
		</view>

        <view class="vrWrap top-10" v-if="vrList.length > 0">
            <vr-item :list="vrList"></vr-item>
            <up-loadmore :status="loadingType" />
        </view>
		
		<up-empty text="暂无数据" mode="list" marginTop="100" v-if="vrList.length === 0 && loadingType === 'nomore'"></up-empty>

		<up-gap height="40"></up-gap>
		<!-- <bind-seller-bottom-bar :detail="recommendAdviser" v-if="recommendAdviser&&recommendAdviser.avatar_url"></bind-seller-bottom-bar> -->
    </view>
</template>

<script>
	import { mapState, mapActions } from 'pinia';
	import { useConfigStore, useUserInfoStore, useIndexStore } from '@/store/index';
    // import { getSellerInfoById } from '@/common/api/adviser';
	import { loadVRProducts } from '@/common/api/houses';

	export default {
		data() {
			return {
                keyword: '',
				vrList:[],
				next: '',
				loadingType: 'loadmore',
                recommendAdviser: {}
			}
		},
        computed:{
			...mapState(useUserInfoStore, ['userInfo']),
			...mapState(useIndexStore, ['nowCityCode']),
			...mapState(useConfigStore, ['puid'])
		},
		onLoad(options) {
            const { puid='' } = options;
            if(puid) {
                this.setPuid(puid)
            }
			uni.$check_and_login(this.init)
		},
		onPullDownRefresh() {
			this.loadData(true)
		},
		onReachBottom(){
			this.loadData()
		},
		onShareAppMessage(res) {
			return {
				title: 'VR实景看房',
				path: `/pages/products/vr/index?puid=${this.userInfo.id}&city=${this.nowCityCode}`,
				desc: 'VR看房',
				//#ifdef MP-TOUTIAO
				templateId: '',
				//#endif
			}
		},
        //#ifdef MP-WEIXIN
        onShareTimeline() {
            return {
				title: 'VR实景看房',
                query: `puid=${this.userInfo.id}&city=${this.nowCityCode}`
            }
        },
        //#endif
		methods: {
            ...mapActions(useConfigStore, ['setPuid']),

			async init(){
				await this.loadData(true);

                //根据顾问ID获取被绑定的顾问信息
                // if(this.puid && this.puid !== this.userInfo.id) {
                //     try {
                //         let sellInfoRes = await getSellerInfoById({id:this.puid});

                //         if(sellInfoRes.status === 0) {
                //             if(sellInfoRes.detail.product_id) {
                //                 this.recommendAdviser = sellInfoRes.detail;
                //             }
                //         }
                //     } catch (error) {}
                // }
			},

            //点击去搜索
			async clickSearch(){
				await this.loadData(true);
			},

            //加载数据
			async loadData(isRefresh=false){
				if (isRefresh) {
					this.loadingType = 'loadmore';
					this.next = '';
				}
				if(this.loadingType === 'loading' || this.loadingType === 'nomore') return;
				this.loadingType = 'loading';
                let url = (this.next === '' || this.vrList.length === 0) ? `/product/mall/api/vr/all?query=${this.keyword}` : this.next;
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				try {
					let { status, detail } = await loadVRProducts(url);
					if(status !== 0) {
                        uni.stopPullDownRefresh();
					    uni.hideLoading();
						uni.$u.toast(detail);
                        return
                    }

					if (isRefresh) {
						this.vrList = detail.results;
					}else{
						this.vrList.push(...detail.results);
					}

                    this.next = detail.next;
                    this.loadingType = detail.next?'loadmore':'nomore';
					uni.stopPullDownRefresh();
					uni.hideLoading()
				} catch (error) {
					uni.stopPullDownRefresh();
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vrPages{
        min-height: 100vh;
		border-top: 1px solid #FFFFFF;
		position: relative;
		.searchInputWrap{
			position: sticky;
			top: 0;
			z-index: 100;
			padding: 30rpx 28rpx;
		}
        .vrWrap{
            padding: 0 28rpx;
        }
		.houseItem{
			margin-bottom: 60rpx;
			.houseTitle{
				.leftLogo{
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.rightTitle{
					flex-direction: column;
					align-items: flex-start;
					width: calc(100% - 80rpx);
					padding-left: 20rpx;
					.nameBox{
						line-height: 1;
						display: flex;
						justify-content: space-between;
						.title{
							font-size: 32rpx;
							font-weight: bold;
							margin-right: 20rpx;
						}
						.item{
							margin-right: 20rpx;
							padding: 8rpx 14rpx;
							background-color: #F3F4F8;
							color: #878B8E;
							font-size: 24rpx;
						}
						.active{
							background-color: #677ECE;
							color: #FFFFFF;
						}
					}
					.priceBox{
						line-height: 1;
						margin-top: 14rpx;
						.price{
							color: #E04C1F;
							text{
								font-weight: bold;
								font-size: 36rpx;
							}
							margin-right: 10rpx;
						}
						.line{
							font-size: 18rpx;
							font-weight: 100;
							margin-right: 10rpx;
						}
						.area{
							color: #7E7F83;
							margin-right: 20rpx;
						}
						.jiedao{
							color: #7E7F83;
						}
					}
				}
			}
			.houseType{
				font-size: 30rpx;
				margin: 20rpx 0rpx;
				.price{
					margin-left: 10rpx;
				}
				.typePrice{
					color: #E04C1F;
				}
			}
			.houseImg{
				height: 370rpx;
				overflow: hidden;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				.ipang-vr,.vrIcon{
					width: 100rpx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					border-radius: 50%;
					font-size: 88rpx;
					background-color: rgba(0,0,0,.3);
					color: #FFFFFF;
				}
			}
		}
	}
</style>